<template>
    <div class="wrap">
        <header>
             {{username}} - {{rolename}}  <button @click="exit">退出</button>
        </header>
        <div class="con">
            <div class="left">
                <router-link v-for="(item,index) in menulist" :key="index" :to="'/main'+item.menuapi">{{item.menuname}}</router-link>
            </div>
            <div class="right">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            username:'',
            rolename:'',
            menulist:[]
        }
    },
    created(){
        if(!localStorage.getItem('token')){
            this.$router.push('/login')
        }else{
            let {username,rolename} = JSON.parse(localStorage.getItem('userinfo'));
            this.username = username;
            this.rolename = rolename;
            let token = localStorage.getItem('token')
            this.$http.get('/api/menu',{headers:{token}}).then(res => {
                if(res.data.code === 1){
                    this.menulist = res.data.data
                }else{
                    alert(res.data.msg)
                }
            })
        }
    },
    methods:{
        exit(){
            localStorage.clear();
            this.$router.push('/login');
        }
    }
}
</script>

<style lang="scss">
    .wrap{
        width:100%;
        height: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        header{
            width:100%;
            height: 60px;
            border-bottom:1px solid gray;
        }

        .con{
            width:100%;
            flex:1;
            display: flex;
            .left{
                width:150px;
                height: 100%;
                border-right:1px solid gray;
                a{
                    display: block;
                    text-decoration: none;
                }
            }

            .right{
                flex:1;
                height: 100%;
            }
        }
    }
</style>

